<template>
  <div class="componentData">
    <div class="aic jcb">
      <n-space>
        <n-button ghost @click="openHandle" type="primary" size="small">
          <template #icon>
            <n-icon>
              <AddCircle></AddCircle>
            </n-icon>
          </template>
          添加仪表
        </n-button>
      </n-space>
      <n-space>
        <n-button ghost type="primary" size="small">
          <template #icon>
            <n-icon>
              <AddCircle></AddCircle>
            </n-icon>
          </template>
          分享仪表
        </n-button>
      </n-space>
    </div>
    <n-modal v-model:show="showModal" class="go-create-modal">
      <n-space size="large">
        <n-card class="card-box" hoverable>
          <template #header>
            <n-text class="card-box-tite">添加图表</n-text>
          </template>
          <template #header-extra>
            <n-text @click="closeHandle">
              <n-icon size="20">
                <component :is="Close"></component>
              </n-icon>
            </n-text>
          </template>
          <div class="card-box-content" justify="center">
            <n-space>
              <n-button
                size="large"
                :disabled="item.disabled"
                v-for="(item, index) in componentList"
                :key="index"
                @click="btnHandle(item, index)"
              >
                {{ item.name }}
              </n-button>
            </n-space>
          </div>
          <template #action></template>
        </n-card>
      </n-space>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, h, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage, NIcon, TreeOption, useThemeVars } from 'naive-ui'
import { FlashOutline } from '@vicons/ionicons5'
import { Reader, AddCircle, Close } from '@vicons/ionicons5'
const emit = defineEmits(['add'])
const message = useMessage()
const themeVars = useThemeVars()
import { PageEnum } from '@/enums/pageEnum'
import { TabsBottomType } from '@/enums/editReportEnum'
import Draggable from 'vuedraggable'
import { useReportStore } from '@/views/Bi/store/useReportStore'
import { useTargetData } from '@/views/Bi/hooks/useTargetData'
import { cloneDeep } from 'lodash'
import { BiReportData } from '@/views/Bi/store/useReportStore.d'

const reportStore = useReportStore()
const pattern = ref(null)

const showModal = ref(false)
const closeHandle = () => {
  showModal.value = false
}
const openHandle = () => {
  showModal.value = true
}
// import { useTargetData } from '@/views/Bi/hooks/useTargetData'
const btnHandle = (item: any, index: number) => {
  emit('add', item)
 closeHandle()
      
}

const columns = ref([])
const route = useRoute()
const props = defineProps({
  upData: {
    type: Boolean,
    required: true
  }
})
const componentList = computed(() => {
  return reportStore.getbiReportData.filter((res: BiReportData) => res.type == TabsBottomType.COMPONENT)
})
const handleSelect = (key: any) => {
  //   const { id } = route.params
  // // id 标识
  // const biReportId = typeof id === 'string' ? id : id[0]
  //获取 当前底部导航索引值

  pattern.value = key
  initColumns()
}
const initOption = () => {
  return cloneDeep(
    reportStore.getDataBase.map((res: any) => {
      res.meta = res.meta.map((metaItem: any) => {
        return {
          name: metaItem.name,
          field: metaItem.field,
          prefix: () =>
            h(NIcon, null, {
              default: () => h(Reader)
            })
        }
      })
      return res
    })
  )
}
const initColumns = () => {
  const { targetData } = useTargetData()
  //获取当前选择数据源
  if (pattern.value) {
    let dataTable: any = options.value.find((res: any) => res.id == pattern.value)
    targetData.value.data.options = cloneDeep(dataTable)
    columns.value = dataTable.meta
  }
}
const options = ref([])

watch(
  () => props.upData,
  data => {
    // options.value = initOption()
    // initColumns()
  },
  {
    deep: true,
    immediate: true
  }
)
const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    onClick() {
      if (!option.children && !option.disabled) {
        console.log('option :>> ', option)
        message.info('[Click] ' + option)

        //  写入右侧面包屑
        //
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.componentData {
  // background-color: #c48;
  width: 100%;
  .datatableBox {
    height: 100%;

    background-color: v-bind('themeVars.bodyColor');
  }
}
.card-box {
  width: 800px;
  cursor: pointer;
}
.action {
  margin: 10px 10px 0;
}
.inputSearch {
  margin: 10px 10px 0;
}
.treebox {
  margin-top: 10px;
  margin-left: 10px;
  height: 150px;
  min-height: calc(100% - 103px);
  background-color: v-bind('themeVars.modalColor');
}
</style>
